<!-- 新增 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		title="新增"
		v-model="isVisible"
		destroy-on-close
		width="580px"
		:draggable="true"
	>
		<el-form ref="ruleFormRef" :rules="rules" :model="state.form" label-position="right" label-width="100px">
			<el-form-item label="设备编号" prop="deviceCode">
				<el-space>
					<el-input v-model="state.form.deviceCode" style="width: 240px" />
					<el-text>长度 {{ state.form.deviceCode.length }}</el-text>
				</el-space>
			</el-form-item>

			<el-form-item label="厂家" prop="deviceModel">
				<el-radio-group v-model="state.form.deviceModel">
					<el-radio v-for="item in deviceModel" :label="item.name" :key="item.name">
						{{ item.name }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="设备类型" prop="deviceType">
				<el-radio-group v-model="state.form.deviceType">
					<el-radio v-for="item in deviceType" :label="item.name" :key="item.name">
						{{ item.name }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="平台" prop="platformId">
				<el-radio-group v-model="state.form.platformId" @change="platformChange">
					<el-radio v-for="item in platform" :label="item.orgId" :key="item.orgName + item.orgId">
						{{ item.orgName }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="备注" prop="remark">
				<el-input v-model="state.form.remark" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button plain type="warning" @click="isVisible = false"> 取消</el-button>
			<el-button plain type="primary" @click="submitForm(ruleFormRef)"> 确定</el-button>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup name="DeviceAdd">
import { computed, onMounted, reactive, ref } from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import deviceApi from '/@/api/smoke/device';
import { ElMessage } from 'element-plus';

const ruleFormRef = ref<FormInstance>();
const emit = defineEmits(['close', 'success']);

// props
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false,
	},
});

const platform = [
	{
		orgId: 2,
		orgName: '开发平台',
	},
	{
		orgId: 6,
		orgName: '测试平台',
	},
	{
		orgId: 3,
		orgName: '工作平台',
	},
];

const deviceModel = [
	{
		name: 'M1',
	},
	{
		name: 'M3',
	},
	{
		name: 'M4',
	},
];

const deviceType = [
	{
		name: 'POE',
	},
	{
		name: '4G',
	},
];

let state = reactive({
	form: initForm(),
});

const rules = reactive<FormRules>({
	deviceCode: [
		{ required: true, message: '必填', trigger: ['blur','change'] },
		{ min: 12, max: 19, message: '真实填写设备编号（12-19位）', trigger: 'blur' },
	],
	deviceModel: [
		{
			required: true,
			message: '必填',
			trigger: 'change',
		},
	],
	deviceType: [
		{
			required: true,
			message: '必填',
			trigger: 'change',
		},
	],
	platformId: [
		{
			required: true,
			message: '必填',
			trigger: 'change',
		},
	],
	platformName: [
		{
			required: true,
			message: '必填',
			trigger: 'change',
		},
	],
});

onMounted(() => {
	{
		state.form = initForm();
	}
});

const isVisible = computed({
	get: () => {
		return props.dialogVisible;
	},
	set: () => {
		close();
	},
});

function initForm() {
	return {
		deviceCode: '',
		deviceModel: '',
		deviceType: '',
		platformId: '',
		platformName: '',
		remark: '',
	};
}

function platformChange(value: number) {
	let curOrg = platform.filter((item: any) => {
		return item.orgId == value;
	});
	state.form.platformName = curOrg[0].orgName;
}

// 对话框关闭
function close() {
	emit('close');
}

// 保存
async function submitForm(formEl: FormInstance | undefined) {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			deviceApi.add(state.form).then((res) => {
				ElMessage.success('添加成功');
				emit('success');
			});
		}
	});
}
</script>
